<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高校二手书交易平台</title>
    <link rel="stylesheet" href="../../css/login/login.css" />
    <link rel="stylesheet" href="../../plugins/layui.css">
</head>
<!-- 代 码 结 构 -->
<body background="../../images/login.svg">
<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <img class="logo" src="../../images/logo.png" />
        <div class="title">平 台 登 录</div>
        <div class="desc">
            高校二手书交易平台-为全国高校学子服务
        </div>
    </div>
    <div class="layui-form-item">
        <input name="username" type="text" placeholder="账 户 : admin " value="admin" hover class="layui-input"  />
    </div>
    <div class="layui-form-item">
        <input name="password" type="password" placeholder="密 码 : admin " value="admin" hover class="layui-input"  />
    </div>
    <div class="layui-form-item">
        <input placeholder="验证码 : " name="captcha" hover class="code layui-input layui-input-inline"  />
        <input id="key" name="key"  style="display: none;width: 0;height: 0;" value="">
        <img src="" class="codeImage" id="captchaImage"/>
    </div>
    <div class="layui-form-item">
        <input type="checkbox" name="rememberMe" title="记住密码" lay-skin="primary">
        <div class="findpws"><a href="#">找回密码</a></div>
    </div>
    <div class="layui-form-item">
        <button class="pear-btn-success login" lay-submit lay-filter="login">
            登 入
        </button>
        <button class="pear-btn pear-btn-success register" lay-submit lay-filter="register">
            注 册
        </button>
    </div>
</form>

<script src="../../plugins/layui.js"></script>
<script src="../../plugins/jquery-3.2.1.min.js"></script>
<script src="../../plugins/jquery-3.2.1.js"></script>




<script> 

let rootPath="http://39.106.137.246:10088"

    layui.use(['form','jquery','layer'], function() {
       
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        form.on('submit(login)', function(data){
        	$(".login").attr("disabled","disabled")
            let loader = layer.load();
            $(".login").html("<i class='layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-icon-loading' />");
            $.ajax({
                url:rootPath+'/user/login',
                data:data.field,
                type:"post",
                dataType:'json',
                success:function(result){
                    if(result.code==200){
                    	console.log("登录成功");
                        setCookie('username', result.data.username, 1); // 保存用户名到cookie，有效期为7天
                        setCookie('token', result.data.token, 1); // 保存token到cookie
                        localStorage.setItem('username', result.data.username);
                        localStorage.setItem('pic', result.data.pic);
                        localStorage.setItem('token', result.data.token);
                        localStorage.setItem('id', result.data.id);
                        layer.msg(result.msg,{icon:1,time:1000},function(){
                            location.href = "/index.html";
                        })
                    }else{
                        layer.msg(result.msg,{icon:2,time:1000},function(){
                            getCode();
                        });
                        $(".login").removeAttr("disabled");
                    }
                    $(".login").html("登 入")
                    layer.close(loader);
                }
            });
            return false;
        });

        $("#captchaImage").click(function(){
            getCode();
        })
        setInterval(function(){
            getCode();
        },30000);

  

    })

    function setCookie(name, value, days) {
    let expires = '';
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // 将天数转换为毫秒数
        expires = '; expires=' + date.toUTCString(); // 设置过期时间（UTC时间）
    } else {
        expires = ''; // 如果不需要设置过期时间，则保持原样（永不过期）
    }
    document.cookie = name +"="+ value + '; expires=' + expires;
    console.log(document.cookie);
}


    var registerButton = document.getElementsByClassName("register")[0];
    registerButton.onclick = function(){
        window.location.href = "/pages/register/register.html";
    }

    function getCode(){
        $.get(rootPath+'/captcha/captchaImage', function(result) {
        $("#captchaImage").attr('src', "data:image/gif;base64,"+result.data.codeUrl); // 显示验证码图片
        $('#key').val(result.data.uuid); // 保存验证码key
        console.log($('#key').val());
        // localStorage.setItem("uuid",result.data.uuid);
    });
}


window.onload=function(){
    getCode()
}





</script> 
 
</body>
</html>